<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

  

  <title>首页</title>

  <script src="font/iconfont.js"></script>

  <script src="font_d42l8r0ck9c/iconfont.js"></script>

  <style>

    

/* 首页图片轮播 */

    body,ul,p{

            padding: 0;

            margin: 0;

        }

        body{

            background-color: #E8E3DF;

        }

        ul{

            letter-spacing: none;

        }

        img{

            border: none;

            display: block;

        }

        .slide{

            overflow: hidden;/* 溢出隐藏，不是bfc */

        }

        .slide{

            width: 500%;

            overflow: hidden;/* bfc */

            animation: wei/* 你的姓 */ 18s/* 时间 */ infinite/* 无限循环 */;

        }

        .slide li{

            width: 20%;

            float: left;/* li要横过来 */

            position: relative;

        }

        .slide img{

            width: 100%;

            height: 100%;

        }

     @keyframes wei{
            10%{
                margin-left: 0;/* 0~2s */
            }
            20%{
                margin-left: -100%;/* 2~4s */
            }
            30%{
                margin-left: -100%;/* 4~6s */
            }
            40%{
                margin-left: -200%;/* 6~8s */
            }
            50%{
                margin-left: -200%;/* 8~10s */
            }
            60%{
                margin-left: -300%;/* 10~12s */
            }
            70%{
                margin-left: -300%;/* 12~14s */
            }
            80%{
                margin-left: -400%;/* 14~16s */
            }
            90%{
                margin-left: -400%;/* 16~18s */
            }
            100%{
                margin-left: 0;/* 最后一个需要和初始状态(0%)一致 */
            }
        }



/* 用户二维码特权盒子 */

        a{

            text-decoration: none;

        }

        .box1{

            width: 95%;

            height: 250px;

            line-height: 20px;

            border-bottom: 1px solid #c45a5a;

            position: relative;/* 绝对定位的父元素一定要设置position；relative */

            float: right;

            background-color: #fff;

            margin: -40px 0px 10px 10px;

        }

        .box1 h2{

            font-size: 20px;

            float: left;

            padding-left: 10px;

        }

        .box1 h3{

            font-size: 18px;

            text-align: center;

        }

        .box1 h4{

            font-size: 16px;

            float: left;

            padding-left: 10px;

        }

        .box1 a{

            font-size: 10px;

            float: right;

            color: #333;

            margin-right: 5px;

            text-decoration: none;

        }

       .box1-1{

            text-align: center;

            background-color: #9dd4ab;

            padding: 0;

            width: 100px;

            margin-left: 100px;

       } 



/* 自取外送盒子 */

    .box2{

            width: 95%;

            height: 200px;

            line-height: 20px;

            border-bottom: 1px solid #c45a5a;

            position: relative;/* 绝对定位的父元素一定要设置position；relative */

            float: right;

            background-color: #fff;

            margin: 20px 0px 10px 10px;

       }

       /* 自取外送左右盒子 */

       .box2-1{

            width: 100%;

            height: 150px;

            padding: 10px 20px 10px 20px;

            border: 0;

            /* column-count: 2;/* 多列的例数 */

            /* column-gap: 25px; *//* 多列之间距离 */

            /* clip-rule: 5px solid #ccc; *//* 多列之间边框 */ 

            display: flex;

       }

       .box2-1-1{

            width: 50%;

            height: 70px;

            text-align: center;

            margin: 0;

            padding: 5px 10px 5px 10px;

       }

       .box2-1-2{

            width: 50%;

            height: 70px;

            text-align: center;

            margin: 0;

            padding: 5px 10px 5px 10px;

       }

       /* 盒子2滑动图 */
       /* .box2-2{
        width: 100%;
        height: 80px;
       }
       .box2-2 ul{
        display: flex;
        flex-wrap: wrap;
       } */
       



/*  图片盒子3 上图下文 图滚动*/

      .box3{

            width: 95%;

            height: 550px;

            line-height: 20px;

            border-bottom: 1px solid #c45a5a;

            position: relative;/* 绝对定位的父元素一定要设置position；relative */

            float: right;

            background-color: #fff;

            margin: 70px 0px 10px 10px;

       }

       .box3 img{

        width: 100%;

        height: 80%;

       }







       /* 文字盒子4 新茶饮开创者 */

       .box4{

            width: 95%;

            height: 600px;

            line-height: 20px;

            border-bottom: 1px solid #c45a5a;

            position: relative;/* 绝对定位的父元素一定要设置position；relative */

            float: right;

            background-color: #EBE4D4;

            margin: 70px 0px 10px 10px;

       }



/* 下导航 */

.icon {

           width: 1em;

           height: 1em;

           vertical-align: -0.15em;

           fill: currentColor;

           overflow: hidden;

        }

        ul{

            list-style: none;

        }

        a{

            text-decoration: none;

            color: black;

        }

        .bnav{

            position: fixed;

            left: 0;

            bottom: 0;

            background-color: #fff;

            z-index: 9;

            width: 100%;

        }

        .body{

            margin-bottom: 50px;

        }

        .bnav>ul{

            display: flex;

        }

        .bnav li{

            width: 20%;

            text-align: center;

        }

        .icon{

            font-size: 36px;

            margin: 5px 0;

        }

  </style>



</head>

<body>

     <!-- 首页最上轮播图片 -->
     <!-- css3 -->
     <div class="slide">
      <ul>
          <li>
              <a href="#"><img src="img/首页轮播图片/轮播图1.jpg"></a>
          </li>
          <li>
              <a href="#"><img src="img/首页轮播图片/轮播图2.jpg"></a>
          </li>
          <li>
              <a href="#"><img src="img/首页轮播图片/轮播图3.jpg"></a>
          </li>
          <li>
              <a href="#"><img src="img/首页轮播图片/轮播图4.jpg"></a>
          </li>
          <li>
              <a href="#"><img src="img/首页轮播图片/轮播图5.jpg"></a>
          </li>
      </ul>
  </div>

  <!-- 用户二维码特权盒子  盒子靠右 -->
<div class="box1">
   <h2>Wwei</h2><div class="box1-1"><h3 style="color: #fff;">进阶贵宾</h3></div><br>
    <h4>喜茶券 6     积分 28</h4><br>
    <a href="#">----------------------->></a><br> 
  <h4>我的特权 您有2项待使用特权,开启提醒不错过</h4>
</div>

<!-- 自取外送盒子 靠右 -->
<div class="box2">
<div class="box2-1">
    <!-- 盒子上左 -->
    <div class="box2-1-1"><h2><a href="./diandan.html">到店自取</a></h2><br><h4>提前下单免排队</h4></div>
    <!-- 盒子上右 -->
    <div class="box2-1-2"><h2><a href="./diandan.html">喜外送</a></h2><br><h4>随时送喜到家</h4></div>
</div><!-- box2-1的 -->
<!-- 盒子下 -->
<!-- <--box2-2的 -->  

</div><!-- box2的 -->

<!-- 图片盒子3 上图下文 图滚动-->
<div class="box3">
    <img src="img/首页轮播图片/图1.jpg">
    <h2>上新茶~共品轻盈「水云间」</h2>
    <h4>甄选潮州凤凰单丛，回归纯粹茶香。</h4>
</div>

<!-- 文字盒子4 -->
<div class="box4">
    <!-- 竖的大字 -->
    <h2>新茶饮 开创者</h2>
    <!-- 第二行小字 -->
    <h4>2012年,喜茶使用真茶、真奶首创芝士茶推动行业原料升级，成为新茶饮的开创者</h4>
<!-- 第三行 -->
    <!-- 第三行大字 -->
    <h3>成为「喜茶事业合伙人」</h3>
    <!-- 第三行小字 -->
    <h4>与我们携手，将真品质的茶饮和激发喜悦的品牌，带给更多的用户</h4>
</div>

<!-- 下导航 --> 
  <bav class="bnav" style="background-color: #fff;">
  <ul>
  <li>
      <a href="./index.html">
          <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shouye"></use>
          </svg>
          <p>首页</p>
      </a>
  </li>
  <li>
      <a href="./diandan.html">
          <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yinpinbanjia"></use>
          </svg>
          <p>点单</p>
      </a>
  </li>
  <li>
      <a href="./baihuo.html">
          <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dingdan"></use>
          </svg>
          <p>百货</p>
      </a>
  </li>
  <li>
      <a href="./dingdan.html">
          <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dingdan1"></use>
          </svg>
          <p>订单</p>
      </a>
  </li>
  <li>
      <a href="./huiyuan.html">
          <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-chengyuan"></use>
          </svg>
          <p>我的</p>
      </a>
  </li>
</ul>
</bav>

</body>
</html>